<template>
    <div id="app">
        <v-app id="inspire">
            <v-navigation-drawer v-model="drawer" app>
                <v-list dense>
                    <nuxt-link to="/">
                        <v-list-item link>
                            <v-list-item-action>
                                <v-icon>mdi-home</v-icon>
                            </v-list-item-action>
                            <v-list-item-content>
                                <v-list-item-title>Home</v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </nuxt-link>
                    <nuxt-link to="/products">
                        <v-list-item link>
                            <v-list-item-action>
                                <v-icon>mdi-dialpad</v-icon>
                            </v-list-item-action>
                            <v-list-item-content>
                                <v-list-item-title>Product</v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </nuxt-link>
                    <nuxt-link to="/about">
                        <v-list-item link>
                            <v-list-item-action>
                                <v-icon>mdi-arrow-up-bold-box-outline</v-icon>
                            </v-list-item-action>
                            <v-list-item-content>
                                <v-list-item-title>About</v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </nuxt-link>
                    <nuxt-link to="/contact">
                        <v-list-item link>
                            <v-list-item-action>
                                <v-icon>mdi-message-text</v-icon>
                            </v-list-item-action>
                            <v-list-item-content>
                                <v-list-item-title>Contact</v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </nuxt-link>
                    <v-divider class="mx-4" light vertical></v-divider>
                    <nuxt-link to="/user">
                        <v-list-item link>
                            <v-list-item-avatar>
                                <img src />
                            </v-list-item-avatar>
                            <v-list-item-content>
                                <v-list-item-title>User</v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </nuxt-link>
                </v-list>
            </v-navigation-drawer>

            <!-- <v-app-bar app color="indigo" dark>
                    <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
                    <v-toolbar-title>Application</v-toolbar-title>
                    https://picsum.photos/1920/1080?random
            </v-app-bar>-->
            <v-app-bar app fiexd dark shrink-on-scroll fade-img-on-scroll src="/images/bargb.jpg">
                <template v-slot:img="{ props }">
                    <v-img
                        v-bind="props"
                        gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
                    ></v-img>
                </template>

                <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

                <v-toolbar-title>Casso</v-toolbar-title>

                <v-spacer></v-spacer>

                <v-btn icon>
                    <v-icon>mdi-magnify</v-icon>
                </v-btn>

                <v-btn icon>
                    <v-icon>mdi-heart</v-icon>
                </v-btn>

                <v-btn icon>
                    <v-icon>mdi-dots-vertical</v-icon>
                </v-btn>
            </v-app-bar>

            <v-main class="fill-height">
                <nuxt />
            </v-main>
            <!-- <v-footer color="indigo" app>
                <span class="white--text">&copy; {{ new Date().getFullYear() }}</span>
            </v-footer>-->
            
        </v-app>
    </div>
</template>

<script>
export default {
    props: {
        source: String,
    },
    data: () => ({
        drawer: true,
    }),
    created() {
        this.$vuetify.theme.dark = true;
    }
};
</script>

<style>
</style>